import 'package:flutter/material.dart';

class ContainerTestRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _ContainerTestRouteState();
}

class _ContainerTestRouteState extends State<ContainerTestRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text('Container'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            new Text(
              'Container演示',
              style: TextStyle(
                fontSize: 25.0,
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10.0, left: 50.0, bottom: 70.0),
              //容器外留白
              constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
              //卡片大小
              decoration: BoxDecoration(
                //背景装饰
                gradient: RadialGradient(
                  //渐变背景
                  colors: [Colors.red, Colors.orange],
                  center: Alignment.topLeft,
                  radius: .98,
                ),
                boxShadow: [
                  //卡片阴影
                  BoxShadow(
                      color: Colors.black54,
                      offset: Offset(2.0, 2.0),
                      blurRadius: 4.0)
                ],
              ),
              transform: Matrix4.rotationZ(.2),
              //卡片倾斜变换
              alignment: Alignment.center,
              //卡片内文字居中
              child: Text(
                //卡片文字
                "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
              ),
            ),
            new Text(
              'Container的margin和padding属性的区别:',
              style: TextStyle(fontSize: 25.0),
            ),
            Container(
              margin: EdgeInsets.all(20.0), //容器外补白
              color: Colors.orange,
              child: Text("margin容器外补白"),
            ),
            Container(
              padding: EdgeInsets.all(20.0), //容器内补白
              color: Colors.orange,
              child: Text("padding容器内补白"),
            ),
          ],
        ),
      ),
    );
  }
}
